/* Global style */
@font-face {
    font-family: 'CustomFont';
    src: url('#FONT_URL#') format('truetype'); /* Replace the variable with the URL to the font */
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'CustomFont', Arial, Helvetica, sans-serif;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 12px;
    background-color: white;
    color: $FOREGROUND_DATA;
}

/* unvisited link */
a:link {
    color: $TEXT_LINK;
}

/* visited link */
a:visited {
    color: $TEXT_LINK_VISITED;
}

/* mouse over link */
a:hover {
    color: $TEXT_LINK_HOVER;
}

/* selected link */
a:active {
    color: $TEXT_LINK_ACTIVE;
}

.label, .legend {
    font-size: 13px;
}
/* for svg we have to use the fill attribute instead of the color attribute */
text.label, text.legend {
    font-size: 13px;
}

#tooltip, .popup {
    background-color: white;
    border: solid 1px;
    border-radius:  5px;
    padding:  5px;
}

/* SpectraViewer_v2 Basic: */
#tooltip, #structureView, #spectrumView, .anno { position: absolute; }

.spectrum_label, .spectrum_legend { text-anchor: middle; }

#container {
    vertical-align: top;
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 0;
}

#spectrumView {
    top: 0;
    left: 0;
}

#structureView { top: 20px; }

.anno {
    white-space: pre-line;
    left: 5px;
}

/* SpectraViewer_v2 Changeable: */
.spectrum_legend { fill: #000000; }

.peak {fill: #4d4d4d; width: 2px;}
.peak_mirrorTop { fill: #4d4d4d; width: 2px; } /* normal peaks without explanation */
.peak_mirrorBottom { fill: #4d4d4d; width: 2px; } /* simulated isotope peaks */
.peak_matched { fill: $Spectrum.EXPLAINED_PEAKS_FORMULA; width: 2px; } /*isotope peaks in MS1 that were matched to simulated isotope peaks*/
.peak_formulaInfo { fill: $Spectrum.EXPLAINED_PEAKS_FORMULA; width: 2px; } /* explained formula */
.peak_structInfo { fill: $Spectrum.EXPLAINED_PEAKS_STRUCTURE; width: 2px; } /* explained structure */

.peak_select {
    width: 4px;
}

/*The peak attributes are currently not change by hovering.*/
/*.peak_hover {}*/

.peak_shadow{ /*<= Set style for all shadow*/
    /*fill: lightgrey;*/
    width: 12px;
    /* filter: blur(3px);*/
}
#shadow_select{ fill: #ebebeb;} /*<= Set style for individual shadow */
#shadow_hover{ fill: #f5f5f5;} /*<= Set style for individual shadow*/


#str_border {
    border: 0.5px solid #cfcfcf;
    border-radius: 5px;
    padding: 5px;
}

.highlight_bond { stroke: $MolecularStructures.SELECTED_SUBSTRUCTURE;}
.highlight_cut { stroke: $MolecularStructures.BREAKING_BOND;}
.highlight_atom { fill: $MolecularStructures.SELECTED_SUBSTRUCTURE; }
g.highlight_atom path { fill: $MolecularStructures.SELECTED_SUBSTRUCTURE; }
.rest_bond { stroke: $MolecularStructures.BACKGROUND_STRUCTURE;}
.rest_atom { fill: $MolecularStructures.BACKGROUND_STRUCTURE; }
.default_bond { stroke: $MolecularStructures.SELECTED_SUBSTRUCTURE; } /* default stroke-width is 0.19px */
.default_atom { fill: $MolecularStructures.SELECTED_SUBSTRUCTURE; }

.diff_ruler { stroke: #000000; }
.diff_label { fill: #000000; }
.diff_band { stroke: #000000; stroke-width: 2px}

/*
    LCMS-Viewer
*/
.lcmaincurve {
    stroke: $LCMSVIEW.SELECTED_FEATURE_TRACE_COLOR;
    stroke-width: 3px;
}

.magnifier {
    stroke: #000000;
    stroke-width: 2px;
}

rect.secondaryFeatureBox {
        fill:$LCMSVIEW.SECONDARY_FEATURE_BOX_FILL;
        fill-opacity: 0.03;
        stroke:$LCMSVIEW.SECONDARY_FEATURE_BOX_STROKE;
        stroke-width: 2px;
}
rect.secondaryFeatureBox:hover {
        fill:$LCMSVIEW.SECONDARY_FEATURE_BOX_FILL;
        fill-opacity: 0.08;
        stroke:$LCMSVIEW.SECONDARY_FEATURE_BOX_STROKE;
        stroke-width: 4px;
}

rect.mainFeatureBox {
        fill:$LCMSVIEW.MAIN_FEATURE_BOX_FILL;
        fill-opacity: 0.05;
        stroke:$LCMSVIEW.MAIN_FEATURE_BOX_STROKE;
        stroke-width: 3px;
}
rect.mainFeatureBox:hover {
        fill:$LCMSVIEW.MAIN_FEATURE_BOX_FILL;
        fill-opacity: 0.15;
        stroke:$LCMSVIEW.MAIN_FEATURE_BOX_STROKE;
        stroke-width: 4px;
}
rect.terribleQualityFeatureBox {
    stroke-dasharray: 3;
}
.noiselevel {
    stroke-width: 1px;
    stroke:black;
    stroke-dasharray: 3;

}
.lccurve {
        stroke-width: 1px;
}
.lccurve.lcfocused {
        stroke-width: 4px;
}
.lclegend-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    columns: 2;
}

.lclegend-item {
    display: flex;
    align-items: center;
    width: 96%;
    margin: 0%;
    box-sizing: border-box;
    padding:9px;
    break-inside: avoid; /* prevent single item from splitting across columns */
    border: 1px solid $BACKGROUND; /*'invisible' border to prevent jumping*/
}
.lclegend-item.lcfocused {
    border: 1px solid black;
    background-color: $LCMSVIEW.LEGEND_FOCUS;
}

.lccolor-box {
    cursor: pointer;
    width: 16px;
    height: 16px;
    margin-right: 10px;
}

.lcsample-name {
    flex: 1;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lcintensity-value {
    margin-left: 10px;
    text-align: right;
    min-width: 60px;
}

#agpl-logo-fill{
    fill: #663366;
}
#agpl-logo-stroke{
    stroke: #663366;
}